學習資源整理來到尾聲了!!!
基本上在搜尋資料學習的過程中你一定會一直看到Full Stack(Frontend + Backend)的教學,這部分先簡單提一下,能夠讓網站有完整功能,而不是只有靜態網頁,只能單純瀏覽,可以有新增、讀取、刪除、修改的功能(Create、Read、Delete、Update),也有資料存儲的地方,可以理解為廣義的Full Stack。
MERN也是一種Full Stack,還有很多種Full Stack架構,Next.js也有提供作為全端的選擇。
另外還有BAAS(Backend As A Service)和Headless CMS,可以讓前端工程師在沒有後端工程師的情況,也能使用後端的功能(成為一條龍?!),很常在Full Stack的教學看到,底下會稍微介紹,之後作品分享也會再次提到。
簡單介紹就是有較完整的後端功能與資料庫服務
想了解更多可以看看有關BAAS(Backend As A Service)的詳細介紹
範例影片:React Firebase Realtime Chat App Tutorial | Firebase V9+ Beginner Tutorial
簡單介紹就是簡易的後端功能與資料庫服務
想了解更多可以看看有關Headless CMS的詳細介紹
Contentful
範例影片:Build a blog using Contentful headless CMS and NextJs
Strapi
範例影片:Complete E-Commerce App with React, Strapi, Stripe | Shopping App Tutorial for Beginners
Sanity
範例影片:Personal Website Tutorial with Next.js 13, Sanity.io, TailwindCSS, and TypeScript
MERN Stack = Mongodb + Express + React + Node.js
Mongodb : NoSQL資料庫(非關連式資料庫)
Express : 後端框架
React : 前端框架(廣義)前端函式庫(狹義)
Node.js : 後端執行環境
除了MERN Stack之外,還有MEAN Stack跟MEVN Stack,基本上就是前端框架做替換,A是Angular的代稱,V是Vue的代稱。
剛開始的學習資源建議要找時間短的,90–120分鐘這種比較好,或是有拆分成很多單元的也可以,時間太長一開始會看不下去。等要練習做作品再來虐自己,比較不會提早陣亡。
MERN Stack + Tailwind CSS - React 小專案實踐計畫
MERN Stack Crash Course Tutorial
MERN Stack CRUD Operations | Full Stack CRUD Operations | React, Node, Express & MongoDB
MERN Stack Tutorial - Book Store Project
React Node.js Full Stack Blog App Tutorial | MERN Stack APP Full Course
Build and Deploy a Full Stack MERN AI Image Generation App | Midjourney & DALL-E Clone
現在已經到13的版本了,看到低於13的教學就不建議花時間學了。
目前大多數的公司都還是React為主,可能部分專案用Next.js,如果時間有限,會建議先把React學完整一點會比較好。
官方文件(新版):https://nextjs.org/
官方文件(舊版):https://nextjs.tw/
Next.js 13 Full Course 2023 | Build and Deploy a Full Stack App Using the Official React Framework
Next.js Full Course for Beginners | Nextjs 13 Tutorial | 7 Hours
Restaurant Food Delivery App Design - React Next.js & Tailwind | Responsive Food Ordering Website
之後還會在學習紀錄篇和作品篇提到Full Stack,歡迎持續追蹤。
接下來就是分享學習記錄拉!赤裸裸地分享我的轉職不認真之路